<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();//获取项目名称
%>
<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="<%=path%>/static/css/font.css">
        <link rel="stylesheet" href="<%=path%>/static/css/xadmin.css">
        <script src="<%=path%>/static/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="<%=path%>/static/js/xadmin.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="layui-fluid" id="divvuehtml">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <blockquote class="layui-elem-quote">欢迎进入课件上传系统
                            </blockquote>
                        </div>
                    </div>
                </div>

        </div>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script type="text/javascript" src="<%=path%>/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=path%>/static/js/vue.js"></script>
    <script th:inline="none">
        var ve = new Vue({
            el: '#divvuehtml',//绑定vue渲染范围
            data: {
                 user:{}
            },created: function () {//vue在打开html也没初始化创建函数
                this.ininUser();
                this.ininChart();
            },mounted: function () {//初始化html完成后在进行操作
                setTimeout(function() {
                    layui.use(['table','form','layer'],function() {
                        var form = layui.form;
                        var layer = layui.layer;
                    });
                },100)
            },methods: {//调用函数
                 ininUser:function () {
                     $.get("<%=path%>/api/main/getCountAll.do",function(data){
                         if(data.success){
                             ve.user = data.data;
                         }else{
                             xadmin.alert(data.msg,{icon:2});
                         }
                     },"json")
                 },
                ininChart:function () {
                    $.get("<%=path%>/api/main/getChartCountAll.do",function(data){
                        if(data.success){
                            // 基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('main1'));
                            // 指定图表的配置项和数据
                            var option = {
                                grid: {
                                    top: '5%',
                                    right: '1%',
                                    left: '1%',
                                    bottom: '10%',
                                    containLabel: true
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                xAxis: {
                                    type: 'category',
                                    data: data.data.day
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    name:'用户量',
                                    data: data.data.count,
                                    type: 'line',
                                    smooth: true
                                }]
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);
                        }else{
                            xadmin.alert(data.msg,{icon:2});
                        }
                    },"json")
                }
            },updated: function () {
                layui.use(['form'], function(){
                    var form = layui.form;
                    form.render();
                })
            }
        })



    </script>
</html>